import styles from './index.module.less';
import vectorImg from '../../../assets/vector1.svg';
import logoImg from '../../../assets/logo.png';
import bgImg from '../../../assets/qixing.png';

const features = [
  'Broad voltage power 9-90V',
  'Communication type Bluetooth',
  'Communication type 4G',
  'Full vehicle communication CAN',
  'Full vehicle communication UART',
  'OTA',
  'Positioning method GPS',
  'Installation type Front installation',
  'Installation type Rear installation',
  'Accelerometer',
  'Water resistance level',
];

const products = ['VBox', 'VLamp', 'VMate', 'VTracker', 'VCU'];

// 表格内容，符号：1=实心圆，2=空心圆，3=虚线圆，4=横杠，字符串为文本
const table = [
  [1, 1, 1, 1, 1], // Broad voltage power 9-90V
  [1, 1, 1, 1, 1], // Bluetooth
  [2, 4, 2, 4, 4], // 4G
  [1, 1, 1, 1, 1], // CAN
  [4, 1, 1, 1, 1], // UART
  [1, 1, 1, 1, 1], // OTA
  [1, 1, 1, 1, 1], // GPS
  [1, 1, 1, 1, 1], // Front install
  [3, 3, 3, 3, 3], // Rear install
  [1, 1, 1, 1, 1], // Accelerometer
  ['IP66', 'IP65', 'IP65', 'IP54', 'IP65'], // Water resistance
];

const legend = [
  { icon: 1, text: 'Indicates that the feature or function is a standard configuration.' },
  { icon: 2, text: 'Indicates that the feature or function is optional but not standard. It can be added as an optional configuration.' },
  { icon: 3, text: 'Indicates that the feature requires protocol adaptation to be used and the vehicle must have a reserved IoT outlet.' },
  { icon: 4, text: 'Indicates that the feature or function is not applicable to the product or model.' },
];

const renderIcon = (type: number|string) => {
  if (type === 1) return <span className={styles.dotSolid}></span>;
  if (type === 2) return <span className={styles.dotHollow}></span>;
  if (type === 3) return <span className={styles.dotDashed}></span>;
  if (type === 4) return <span className={styles.dash}>--</span>;
  if (typeof type === 'string') return <span className={styles.textCell}>{type}</span>;
  return null;
};

const IotHard = () => {
  return (
    <div className={styles.wrap} id='iot'>
      <div className={styles.topSectionWrap}>
        <div className={styles.topSection}>
          <div className={styles.title}>IoT Hardware<br />Solution</div>
          <img src={vectorImg} />
          <div className={styles.desc}>
            <div>Developed by our self-owned R&D team, our IoT hardware seamlessly integrates with the software system to connect users, vehicles, and the cloud.</div>
            <div>Vehicle data is transmitted to the cloud through IoT devices.</div>
            <div>In the future of the automotive industry, smart hardware will become a standard feature in every vehicle.</div>
          </div>
        </div>
      </div>
      <div className={styles.tableSection}>
        <div className={styles.tableWrap}>
          <div className={styles.tableHeader}>
            <div className={styles.logoCell}><img className={styles.logo} src={logoImg} /></div>
            {products.map((p, i) => (
              <div className={styles.headerCell} key={i}>{p}</div>
            ))}
          </div>
          {features.map((f, i) => (
            <div className={styles.tableRow} key={i}>
              <div className={styles.featureCell}>{f}</div>
              {table[i].map((cell, j) => (
                <div className={styles.dataCell} key={j}>{renderIcon(cell)}</div>
              ))}
            </div>
          ))}

          <div className={styles.note}>
            <div className={styles.legend}>
              {legend.map((item, i) => (
                <div className={styles.legendRow} key={i}>
                  {renderIcon(item.icon)} <span className={styles.legendText}>{item.text}</span>
                </div>
              ))}
            </div>
            <br />
            * Only the VBox series supports global connectivity in 4G devices, while the remaining series support only EU or NA.The core 
            communication modules that meet the relevant certifications for their respective usage areas, such as CE, FCC, IC, GCF, and RCM.
          </div>
        </div>
      </div>
      <div className={styles.bg_wrap}>
        <img src={bgImg} className={styles.bg} />
      </div>
    </div>
  );
};

export default IotHard;